import { measureTextWidth } from '@ant-design/plots';

import Chart from './Chart';
import { DEFAULT_DUALAXES_CONFIG } from './constants';
export const renderStatistic = (containerWidth, text, style) => {
  const { width: textWidth, height: textHeight } = measureTextWidth(
    text,
    style,
  );
  const R = containerWidth / 2; // r^2 = (w / 2)^2 + (h - offsetY)^2

  let scale = 1;

  if (containerWidth < textWidth) {
    scale = Math.min(
      Math.sqrt(
        Math.abs(
          Math.pow(R, 2) /
            (Math.pow(textWidth / 2, 2) + Math.pow(textHeight, 2)),
        ),
      ),
      1,
    );
  }

  const textStyleStr = `width:${containerWidth}px;`;
  return `<div style="${textStyleStr};font-size:${scale}em;line-height:${
    scale < 1 ? 1 : 'inherit'
  };">${text}</div>`;
};

export const ProPie = (props) => {
  return <Chart type="pie" {...props}></Chart>;
};

export const ProLine = (props) => {
  return <Chart type="line" {...props}></Chart>;
};

export const ProColumn = (props) => {
  return <Chart type="column" {...props}></Chart>;
};

export const ProWordCloud = (props) => {
  return <Chart type="wordcloud" {...props}></Chart>;
};

export const ProFunnel = (props) => {
  return <Chart type="funnel" {...props}></Chart>;
};

export const ProDualAxes = (props) => {
  return (
    <Chart type="dualaxes" {...DEFAULT_DUALAXES_CONFIG} {...props}></Chart>
  );
};

export const ProArea = (props) => {
  return <Chart type="area" {...props}></Chart>;
};
